﻿<UserControl
    x:Class="WinRTXamlToolkit.Sample.Views.ChartTestView"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:WinRTXamlToolkit.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
    xmlns:Series="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
    xmlns:datavis="using:WinRTXamlToolkit.Controls.DataVisualization">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition
                Width="310" />
            <ColumnDefinition
                Width="*" />
        </Grid.ColumnDefinitions>
        <ListView
            x:Name="ChartsIndex"
            SelectionMode="Single"
            SelectedIndex="{Binding SelectedIndex, ElementName=ChartsList, Mode=TwoWay}">
            <ListView.ItemContainerStyle>
                <Style
                    TargetType="ListViewItem">
                    <Setter
                        Property="Padding"
                        Value="12,5" />
                    <Setter
                        Property="FontWeight"
                        Value="SemiBold" />
                </Style>
            </ListView.ItemContainerStyle>
            <TextBlock>Pie Chart</TextBlock>
            <TextBlock>Pie Chart with Custom Design</TextBlock>
            <TextBlock>Column Chart</TextBlock>
            <TextBlock>Bar Chart</TextBlock>
            <TextBlock>Line Chart</TextBlock>
            <TextBlock>Line Chart w/Manually Set Axis Range</TextBlock>
            <TextBlock>Line Chart Without Data Points</TextBlock>
            <TextBlock>Mixed Chart</TextBlock>
            <TextBlock>Area Chart</TextBlock>
            <TextBlock>Bubble Chart</TextBlock>
            <TextBlock>Scatter Chart</TextBlock>
            <TextBlock>Stacked Bar Chart</TextBlock>
            <TextBlock>100% Stacked Bar Chart</TextBlock>
            <TextBlock>Stacked Column Chart</TextBlock>
            <TextBlock>100% Stacked Column Chart</TextBlock>
            <!--ItemsSource="{Binding Items, ElementName=ChartsList}"
            DisplayMemberPath="Content.Title">-->
        </ListView>
        <FlipView
            x:Name="ChartsList"
            Grid.Column="1">
            <charting:Chart
                x:Name="PieChart"
                Title="Pie Chart"
                Margin="70,0">
                <charting:Chart.Series>
                    <Series:PieSeries
                        Title="Population"
                        ItemsSource="{Binding Items}"
                        IndependentValueBinding="{Binding Name}"
                        DependentValueBinding="{Binding Value}"
                        IsSelectionEnabled="True" />
                </charting:Chart.Series>
            </charting:Chart>
            <charting:Chart
                x:Name="PieChartWithCustomDesign"
                Title="Pie Chart with Custom Design"
                Margin="70,0">
                <charting:Chart.Palette>
                    <charting:ResourceDictionaryCollection>
                        <!-- Gold -->
                        <ResourceDictionary>
                            <SolidColorBrush
                                x:Key="Background"
                                Color="Gold" />
                            <Style
                                x:Key="DataPointStyle"
                                TargetType="Control">
                                <Setter
                                    Property="Background"
                                    Value="{StaticResource Background}" />
                            </Style>
                            <Style
                                x:Key="DataShapeStyle"
                                TargetType="Shape">
                                <Setter
                                    Property="Stroke"
                                    Value="{StaticResource Background}" />
                                <Setter
                                    Property="StrokeThickness"
                                    Value="2" />
                                <Setter
                                    Property="StrokeMiterLimit"
                                    Value="1" />
                                <Setter
                                    Property="Fill"
                                    Value="{StaticResource Background}" />
                            </Style>
                        </ResourceDictionary>
                        <!-- Green -->
                        <ResourceDictionary>
                            <SolidColorBrush
                                x:Key="Background"
                                Color="GreenYellow" />
                            <Style
                                x:Key="DataPointStyle"
                                TargetType="Control">
                                <Setter
                                    Property="Background"
                                    Value="{StaticResource Background}" />
                            </Style>
                            <Style
                                x:Key="DataShapeStyle"
                                TargetType="Shape">
                                <Setter
                                    Property="Stroke"
                                    Value="{StaticResource Background}" />
                                <Setter
                                    Property="StrokeThickness"
                                    Value="2" />
                                <Setter
                                    Property="StrokeMiterLimit"
                                    Value="1" />
                                <Setter
                                    Property="Fill"
                                    Value="{StaticResource Background}" />
                            </Style>
                        </ResourceDictionary>
                        <!-- Blue -->
                        <ResourceDictionary>
                            <SolidColorBrush
                                x:Key="Background"
                                Color="LightSkyBlue" />
                            <Style
                                x:Key="DataPointStyle"
                                TargetType="Control">
                                <Setter
                                    Property="Background"
                                    Value="{StaticResource Background}" />
                            </Style>
                            <Style
                                x:Key="DataShapeStyle"
                                TargetType="Shape">
                                <Setter
                                    Property="Stroke"
                                    Value="{StaticResource Background}" />
                                <Setter
                                    Property="StrokeThickness"
                                    Value="2" />
                                <Setter
                                    Property="StrokeMiterLimit"
                                    Value="1" />
                                <Setter
                                    Property="Fill"
                                    Value="{StaticResource Background}" />
                            </Style>
                        </ResourceDictionary>
                        <!-- Purple -->
                        <ResourceDictionary>
                            <SolidColorBrush
                                x:Key="Background"
                                Color="MediumPurple" />
                            <Style
                                x:Key="DataPointStyle"
                                TargetType="Control">
                                <Setter
                                    Property="Background"
                                    Value="{StaticResource Background}" />
                            </Style>
                            <Style
                                x:Key="DataShapeStyle"
                                TargetType="Shape">
                                <Setter
                                    Property="Stroke"
                                    Value="{StaticResource Background}" />
                                <Setter
                                    Property="StrokeThickness"
                                    Value="2" />
                                <Setter
                                    Property="StrokeMiterLimit"
                                    Value="1" />
                                <Setter
                                    Property="Fill"
                                    Value="{StaticResource Background}" />
                            </Style>
                        </ResourceDictionary>
                        <!-- Brown -->
                        <ResourceDictionary>
                            <SolidColorBrush
                                x:Key="Background"
                                Color="SandyBrown" />
                            <Style
                                x:Key="DataPointStyle"
                                TargetType="Control">
                                <Setter
                                    Property="Background"
                                    Value="{StaticResource Background}" />
                            </Style>
                            <Style
                                x:Key="DataShapeStyle"
                                TargetType="Shape">
                                <Setter
                                    Property="Stroke"
                                    Value="{StaticResource Background}" />
                                <Setter
                                    Property="StrokeThickness"
                                    Value="2" />
                                <Setter
                                    Property="StrokeMiterLimit"
                                    Value="1" />
                                <Setter
                                    Property="Fill"
                                    Value="{StaticResource Background}" />
                            </Style>
                        </ResourceDictionary>
                    </charting:ResourceDictionaryCollection>
                </charting:Chart.Palette>
                <charting:Chart.TitleStyle>
                    <Style
                        TargetType="datavis:Title">
                        <Setter
                            Property="Background"
                            Value="#444" />
                        <Setter
                            Property="HorizontalContentAlignment"
                            Value="Center" />
                        <Setter
                            Property="VerticalContentAlignment"
                            Value="Top" />
                        <Setter
                            Property="IsTabStop"
                            Value="False" />
                        <Setter
                            Property="Padding"
                            Value="10" />
                        <Setter
                            Property="Template">
                            <Setter.Value>
                                <ControlTemplate
                                    TargetType="datavis:Title">
                                    <Border
                                        CornerRadius="10"
                                        Background="{TemplateBinding Background}">
                                        <ContentPresenter
                                            FontSize="36"
                                            FontWeight="SemiBold"
                                            FontStretch="Condensed"
                                            Content="{TemplateBinding Content}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            Margin="{TemplateBinding Padding}"
                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </charting:Chart.TitleStyle>
                <charting:Chart.LegendStyle>
                    <Style
                        TargetType="datavis:Legend">
                        <Setter
                            Property="VerticalAlignment"
                            Value="Stretch" />
                        <Setter
                            Property="Background"
                            Value="#444" />
                        <Setter
                            Property="ItemsPanel">
                            <Setter.Value>
                                <ItemsPanelTemplate>
                                    <controls:UniformGrid
                                        Columns="1"
                                        Rows="5" />
                                </ItemsPanelTemplate>
                            </Setter.Value>
                        </Setter>
                        <Setter
                            Property="TitleStyle">
                            <Setter.Value>
                                <Style
                                    TargetType="datavis:Title">
                                    <Setter
                                        Property="Margin"
                                        Value="0,5,0,10" />
                                    <Setter
                                        Property="FontWeight"
                                        Value="Bold" />
                                    <Setter
                                        Property="HorizontalAlignment"
                                        Value="Center" />
                                </Style>
                            </Setter.Value>
                        </Setter>
                        <Setter
                            Property="ItemContainerStyle"
                            xmlns:series="using:WinRTXamlToolkit.Controls.DataVisualization.Charting">
                            <Setter.Value>
                                <Style
                                    TargetType="series:LegendItem">
                                    <Setter
                                        Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate
                                                TargetType="series:LegendItem">
                                                <Border
                                                    MinWidth="200"
                                                    Margin="20,10"
                                                    CornerRadius="10"
                                                    VerticalAlignment="Stretch"
                                                    HorizontalAlignment="Stretch"
                                                    Background="{Binding Background}">
                                                    <datavis:Title
                                                        HorizontalAlignment="Center"
                                                        VerticalAlignment="Center"
                                                        FontSize="24"
                                                        FontWeight="Bold"
                                                        Content="{TemplateBinding Content}" />
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Setter.Value>
                        </Setter>
                        <Setter
                            Property="Template">
                            <Setter.Value>
                                <ControlTemplate
                                    TargetType="datavis:Legend">
                                    <Border
                                        CornerRadius="10"
                                        Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        Padding="2">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition
                                                    Height="Auto" />
                                                <RowDefinition />
                                            </Grid.RowDefinitions>
                                            <datavis:Title
                                                Grid.Row="0"
                                                x:Name="HeaderContent"
                                                Content="{TemplateBinding Header}"
                                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                Style="{TemplateBinding TitleStyle}" />
                                            <ScrollViewer
                                                Grid.Row="1"
                                                VerticalScrollBarVisibility="Auto"
                                                BorderThickness="0"
                                                Padding="0"
                                                IsTabStop="False">
                                                <ItemsPresenter
                                                    x:Name="Items"
                                                    Margin="10,0,10,10" />
                                            </ScrollViewer>
                                        </Grid>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </charting:Chart.LegendStyle>
                <charting:Chart.Series>
                    <Series:PieSeries
                        Title="Population"
                        ItemsSource="{Binding Items}"
                        IndependentValueBinding="{Binding Name}"
                        DependentValueBinding="{Binding Value}"
                        IsSelectionEnabled="True" />
                </charting:Chart.Series>
            </charting:Chart>
            <charting:Chart
                x:Name="Chart"
                Title="Column Chart"
                Margin="70,0">
                <charting:Chart.Series>
                    <charting:ColumnSeries
                        Title="Population"
                        ItemsSource="{Binding Items}"
                        IndependentValueBinding="{Binding Name}"
                        DependentValueBinding="{Binding Value}"
                        IsSelectionEnabled="True" />
                </charting:Chart.Series>
            </charting:Chart>
            <charting:Chart
                x:Name="BarChart"
                Title="Bar Chart"
                Margin="70,0">
                <charting:BarSeries
                    Title="Population"
                    IndependentValueBinding="{Binding Name}"
                    DependentValueBinding="{Binding Value}"
                    IsSelectionEnabled="True" />
            </charting:Chart>
            <charting:Chart
                x:Name="LineChart"
                Title="Line Chart"
                Margin="70,0">
                <charting:LineSeries
                    Title="Population"
                    IndependentValueBinding="{Binding Name}"
                    DependentValueBinding="{Binding Value}"
                    IsSelectionEnabled="True" />
            </charting:Chart>
            <charting:Chart
                x:Name="LineChartWithAxes"
                Title="Line Chart w/Manually Set Axis Range"
                Margin="70,0">
                <charting:LineSeries
                    Title="Population"
                    IndependentValueBinding="{Binding Name}"
                    DependentValueBinding="{Binding Value}"
                    IsSelectionEnabled="True" />
            </charting:Chart>
            <charting:Chart
                x:Name="LineChart2"
                Title="Line Chart Without Data Points"
                Margin="70,0">
                <charting:LineSeries
                    Title="Population"
                    IndependentValueBinding="{Binding Name}"
                    DependentValueBinding="{Binding Value}"
                    IsSelectionEnabled="True">
                    <charting:LineSeries.DataPointStyle>
                        <Style
                            TargetType="charting:LineDataPoint">
                            <Setter
                                Property="BorderThickness"
                                Value="0" />
                            <Setter
                                Property="IsTabStop"
                                Value="False" />
                            <Setter
                                Property="Width"
                                Value="0" />
                            <Setter
                                Property="Height"
                                Value="0" />
                            <Setter
                                Property="Template">
                                <Setter.Value>
                                    <ControlTemplate
                                        TargetType="charting:LineDataPoint">
                                        <Grid
                                            x:Name="Root"
                                            Opacity="0" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </charting:LineSeries.DataPointStyle>
                </charting:LineSeries>
            </charting:Chart>
            <charting:Chart
                x:Name="MixedChart"
                Title="Mixed Chart"
                Margin="70,0">
                <charting:ColumnSeries
                    Title="Population"
                    ItemsSource="{Binding Items}"
                    IndependentValueBinding="{Binding Name}"
                    DependentValueBinding="{Binding Value}"
                    IsSelectionEnabled="True" />
                <charting:LineSeries
                    Title="Population"
                    IndependentValueBinding="{Binding Name}"
                    DependentValueBinding="{Binding Value}"
                    IsSelectionEnabled="True" />
            </charting:Chart>
            <charting:Chart
                x:Name="AreaChart"
                Title="Area Chart"
                Margin="70,0">
                <charting:AreaSeries
                    Title="Population"
                    IndependentValueBinding="{Binding Name}"
                    DependentValueBinding="{Binding Value}"
                    IsSelectionEnabled="True" />
            </charting:Chart>
            <charting:Chart
                x:Name="BubbleChart"
                Title="Bubble Chart"
                Margin="70,0">
                <charting:BubbleSeries
                    Title="Population"
                    IndependentValueBinding="{Binding Name}"
                    DependentValueBinding="{Binding Value}"
                    IsSelectionEnabled="True" />
            </charting:Chart>
            <charting:Chart
                x:Name="ScatterChart"
                Title="Scatter Chart"
                Margin="70,0">
                <charting:ScatterSeries
                    Title="Population"
                    IndependentValueBinding="{Binding Name}"
                    DependentValueBinding="{Binding Value}"
                    IsSelectionEnabled="True" />
            </charting:Chart>
            <charting:Chart
                x:Name="StackedBar"
                Title="Stacked Bar Chart"
                Margin="70,0">
                <charting:StackedBarSeries>
                    <charting:SeriesDefinition
                        DependentValuePath="Value"
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Doodad" />
                    <charting:SeriesDefinition
                        DependentValuePath="Value"
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Gizmo" />
                    <charting:SeriesDefinition
                        DependentValuePath="Value"
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Widget" />

                </charting:StackedBarSeries>
            </charting:Chart>
            <charting:Chart
                x:Name="StackedBar100"
                Title="100% Stacked Bar Chart"
                Margin="70,0">
                <charting:Stacked100BarSeries>
                    <charting:SeriesDefinition
                        DependentValuePath="Value"
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Doodad" />
                    <charting:SeriesDefinition
                        DependentValuePath="Value"
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Gizmo" />
                    <charting:SeriesDefinition
                        DependentValuePath="Value"
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Widget" />

                </charting:Stacked100BarSeries>
            </charting:Chart>
            <charting:Chart
                x:Name="StackedColumn"
                Title="Stacked Column Chart"
                Margin="70,0">
                <charting:StackedColumnSeries>
                    <charting:SeriesDefinition
                        DependentValuePath="Value"
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Doodad" />
                    <charting:SeriesDefinition
                        DependentValuePath="Value"
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Gizmo" />
                    <charting:SeriesDefinition
                        DependentValuePath="Value"
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Widget" />
                </charting:StackedColumnSeries>
            </charting:Chart>
            <charting:Chart
                x:Name="StackedColumn100"
                Title="100% Stacked Column Chart"
                Margin="70,0">
                <Series:Stacked100ColumnSeries>
                    <charting:SeriesDefinition
                        DependentValuePath="Value"
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Doodad" />
                    <charting:SeriesDefinition
                        DependentValuePath="Value"
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Gizmo" />
                    <charting:SeriesDefinition
                        DependentValuePath="Value"
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Widget" />
                </Series:Stacked100ColumnSeries>
            </charting:Chart>
        </FlipView>
        <controls:CustomAppBar
            Margin="-120,0,0,0"
            MinHeight="140"
            Grid.ColumnSpan="2"
            VerticalAlignment="Bottom"
            IsOpen="True">
            <StackPanel
                Orientation="Horizontal">
                <Button
                    Content="Update"
                    Click="OnUpdateButtonClick" />
            </StackPanel>
        </controls:CustomAppBar>
    </Grid>
</UserControl>
